import {
  Body,
  Button,
  Container,
  Content,
  Header,
  Icon,
  Left,
  Right,
  Text,
  Title,
  View
} from "native-base";
import React, { Component } from "react";
import { StyleSheet } from "react-native";
import { NavigationScreenConfigProps } from "react-navigation";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import CategoryList from "../../components/category-list";
import { ActionDestroy, Actions } from "./action";
import { State } from "./reducer";

interface IStateProps {
  headerTitle: string;
}

interface IDispatchProps {
  destroy: () => void;
}

const mapStateToProps = (state: State): IStateProps => ({
  headerTitle: state.headerTitle
});

const mapDispatchToProps = (dispatch: Dispatch<Actions>): IDispatchProps => ({
  destroy: () => dispatch({ ...new ActionDestroy() })
});

class MainScreenBasic extends Component<
  IStateProps & IDispatchProps & NavigationScreenConfigProps,
  {}
> {
  static navigationOptions = {
    headerTitle: "有趣新闻"
  };

  componentWillUnmount() {
    this.props.destroy();
  }

  render() {
    const { navigate, popToTop } = this.props.navigation;
    const title = MainScreenBasic.navigationOptions.headerTitle || "";

    const categoryList = [
      "推荐",
      "视频",
      "娱乐",
      "图片",
      "社会",
      "体育",
      "王者荣耀",
      "段子",
      "健康",
      "财经",
      "科技",
      "军事",
      "国际",
      "笑话",
      "人文",
      "汽车"
    ];

    return (
      <Container>
        <Header style={{ backgroundColor: "#d43d3d" }}>
          <Left>
            <Button transparent>
              <Icon
                name="home"
                onPress={() => {
                  popToTop();
                }}
              />
            </Button>
          </Left>
          <Body>
            <Title>{title}</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon
                name="search"
                onPress={() => {
                  console.log("search");
                  navigate("Search");
                }}
              />
            </Button>
          </Right>
        </Header>
        <View style={styles.categoryListWrap}>
          <CategoryList data={categoryList} active={"王者荣耀"} />
          <Icon name={"md-add"} style={styles.categoryPlus} />
        </View>
        <Content>
          <Button
            onPress={() => {
              navigate("Search");
            }}
          >
            <Text>Go to Jane's profile</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  categoryListWrap: {
    flexDirection: "row",
    alignItems: "center"
  },
  categoryPlus: {
    color: "#f85959",
    alignSelf: "center",
    paddingLeft: 8,
    paddingRight: 6
  }
});

const MainScreen = connect(
  mapStateToProps,
  mapDispatchToProps
)(MainScreenBasic);

export default MainScreen;
